<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI聊天</title>
    <style>
      /* 设置页面的背景色 */
      body {
        background: linear-gradient(to bottom, #274359, #ffffff);
        height: 100%;
        overflow: hidden;
        /* background-color: #f1f1f1; */
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      .container {
        position: relative;
        z-index: 1;
        text-align: center;
        margin-top: 7%;
      }

      /* 设置页面中的内容居中对齐 */
      .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      /* 设置标题的样式 */
      h1 {
        color: #ffffff;
        font-size: 40px;
        font-weight: bold;
        margin-top: 0;
      }

      /* 设置按钮的样式 */
      .button {
        background-color: #83AF9B;
        border: none;
        color: white;
        padding: 15px 20px;
        text-align: center;
        text-decoration: none;
        display: block;
        font-size: 48px;
        margin: 10px;
        margin-bottom: 20px; /* 添加下方间距 */
        cursor: pointer;
        border-radius: 5px;
        box-shadow: 0 5px #3b823d;
        width: 80%;
        max-width: 400px;
      }
      .button:hover {
        background-color: #3e8e41;
        box-shadow: 0 2px #333;
      }

      /* 根据屏幕大小调整按钮的样式 */
      @media screen and (max-width: 768px) {
        .button {
          font-size: 40px;
          padding: 10px 15px;
          margin-bottom: 15px; /* 缩小下方间距 */ 
        }
      }
      @media screen and (max-width: 576px) {
        .button {
          font-size: 36px;
          padding: 8px 12px;
          margin-bottom: 10px; /* 缩小下方间距 */
        }
      }

      /* 设置链接的样式 */
      a {
        color: #444150;
        font-size: 25px;
        text-decoration: none;
      }
      a:hover {
        color: #873928; /* 鼠标悬停时超链接文字颜色变为红色 */
        text-decoration: underline; /* 鼠标悬停时添加下划线 */
      }


      /* 设置链接的鼠标悬停效果 */
      a:hover {
        text-decoration: underline;
      }

      /* 设置容器内的文字样式 */
      p {
        font-size: 32px;
        margin: 0;
        margin-bottom: 20px;
        color: #f90101;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <div class="container">
      <h1>随时随地，与AI聊天</h1>
      <button class="button" onclick="postRequest('chat-student.html')">青春版</button>
      <button class="button" onclick="postRequest('chat-main.html')">成年友好版</button>
      <br>
      <a href="https://gitee.com/xu-zhanwei/chatanywhere/blob/master/README.md" target="_blank">点击此处查看说明(建议)</a>
      <br>
      <a href="https://gitee.com/xu-zhanwei/chatanywhere/blob/master/Support.md" target="_blank">点击此处支持项目后续开发</a>
      <br>
      <a href="https://gitee.com/xu-zhanwei/chatanywhere/blob/master/purpose.md" target="_blank">点击此处了解免费开放缘由</a>
      <br>
      <a href="https://gitee.com/xu-zhanwei/chatanywhere/blob/master/security.md" target="_blank">点击此处查看隐私保护措施</a>
    </div>
    <script>
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const particles = [];
      const particleCount = 100;

      function Particle(x, y, directionX, directionY, size, color) {
        this.x = x;
        this.y = y;
        this.directionX = directionX;
        this.directionY = directionY;
        this.size = size;
        this.color = color;
      }

      Particle.prototype.draw = function() {
        context.beginPath();
        context.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
        context.fillStyle = this.color;
        context.fill();
      };

      Particle.prototype.update = function() {
        if (this.x + this.size > canvas.width || this.x - this.size < 0) {
          this.directionX = -this.directionX;
        }
        if (this.y + this.size > canvas.height || this.y - this.size < 0) {
          this.directionY = -this.directionY;
        }
        this.x += this.directionX;
        this.y += this.directionY;
      };

      function init() {
        for (let i = 0; i < particleCount; i++) {
          const x = Math.random() * canvas.width;
          const y = Math.random() * canvas.height;
          const directionX = (Math.random() - 0.5) * 2;
          const directionY = (Math.random() - 0.5) * 2;
          const size = Math.random() * 2;
          const color = 'white';

          particles.push(new Particle(x, y, directionX, directionY, size, color));
        }
      }
      function connectParticles() {
        for (let a = 0; a < particles.length; a++) {
          for (let b = a; b < particles.length; b++) {
            const distance = Math.sqrt((particles[a].x - particles[b].x) ** 2 + (particles[a].y - particles[b].y) ** 2);
            if (distance < 80) {
              context.beginPath();
              context.strokeStyle = 'rgba(255,255,255,0.2)';
              context.moveTo(particles[a].x, particles[a].y);
              context.lineTo(particles[b].x, particles[b].y);
              context.stroke();
            }
          }
        }
      }
      function animate() {
        requestAnimationFrame(animate);
        context.clearRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < particles.length; i++) {
          particles[i].update();
          particles[i].draw();
        }
        
        connectParticles();
      }

      init();
      animate();
      async function postRequest(destination) {
          try {
              const response = await fetch('/gotomain', {
                  method: 'POST',
                  headers: {
                      'Content-Type': 'application/json'
                  },
                  body: JSON.stringify({ destination })
              });
              if (response.ok) {
                  const data = await response.json();
                  window.location.href = data.redirectUrl;
              } else {
                  console.error('HTTP error: ' + response.status);
              }
          } catch (error) {
              console.error('Fetch error: ' + error);
          }
      }

    </script>
  </body>
</html>
